<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>品牌列表</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
</head>

<body>
    <div id="app">

        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">添加品牌</h3>
            </div>
            <div class="panel-body form-inline">
                <label>
                    id
                    <input type="text" class="form-control" v-model="id">
                </label>
                <label>
                    name
                    <input type="text" class="form-control" v-model="name" @keyup.enter="add">
                </label>
                <!-- 在vue中 使用事件绑定 如果加了()意思可以传参 -->
                <button class="btn btn-primary" @click="add">添加</button>
                <label>
                    搜索
                    <!-- 在vue.js里面 所有的指令 在调用的时候 都是v开头 这是一个约定 已经被强制化 -->
                    <input type="text" id="search" class="form-control" v-model="keywords" v-focus v-color="'red'">
                </label>

            </div>
        </div>



        <table class="table table-bordered table-hover table-striped">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Ctime</th>
                    <th>{{msg}}</th>
                </tr>
            </thead>

            <tbody>
                <!-- 自定义了一个 search 方法 吧关键字 通过传参形式来传递给 search 方法 -->
                <!-- 在search 方法内部 通过for循环 吧符合的关键字数据 保存到一个新数组里面 返回 -->
                <tr v-for="item in search(keywords)" :key="item.id">
                    <td>{{ item.id }}</td>
                    <td>{{ item.name |}}</td>
                    <td>{{ item.ctime | time}}</td>
                    <td>
                        <a href="" @click.prevent="del(item.id)">删除</a>
                    </td>
                </tr>
            </tbody>
        </table>

    </div>


    <div id="app2">

        <p v-color="'blue'" v-fontWeight="900" v-fontSize="30">{{dt | time}}</p>
    </div>
    <script>
        // 过滤器的语法 demo是名字
        // 过滤器中的 function 第一个参数 被规定死啦 永远都是过滤器管道符前面传递的数据
        Vue.filter('demo', function (name, arg, arg2) {
            // 字符串的replace方法可以写字符串也可以写正则表达式
            return name.replace(/宝马/g, arg + arg2)
        })

        Vue.filter('test', function (name) {
            return name + "====="
        })

        // 过滤器都是全局的 
        Vue.filter('time', function (dataStr, pattern = "") {
            // 根据给定的字符串得到特定的时间
            var dt = new Date(dataStr)

            var y = dt.getFullYear()
            var m = dt.getMonth() + 1
            var d = dt.getDate()



            if (pattern.toLowerCase() === 'yyyy-mm-dd') {
                return `${y}-${m}-${d}`
            } else {
                var hh = dt.getHours()
                var mm = dt.getMinutes()
                var ss = dt.getSeconds()

                return `${y}-${m}-${d} ${hh}:${mm}:${ss}`

            }
        })


        // 自定义全局案件
        Vue.config.keyCodes.f2 = 113

        // 定义全局指令 参数1 是指令名称 注意 在定义的时候 指令的名称不需要加v-前缀
        // 但是在调用的时候 必须加上v- 参数2是一个对象 这个对象身上有一些指令相关的函数 这些函数可以在特定的阶段 执行 相关的操作
        Vue.directive('focus', {
            // 每当指令绑定到元素上的时候 会执行这个bind函数 只会执行一次
            bind: function (el) {
                // 在没个函数 中 不管谁 第一个参数永远是el 表示被绑定指令的那个元素
                // 这个el参数 是一个原生的js对象 dom对象 在元素 刚绑定指令的时候 还没有插入到dom中 这时候 调用 focus 就没有作用 因为一个元素 只有插入dom才能获取到焦点
                // el.focus()

            },
            // 表示元素 插入到 dom 中的时候 会执行 inserted 函数  只执行一次
            inserted: function (el) {
                el.focus()
                // 和js行为有关的操作 最好在inserted 防止js行为不生效
            },
            // 当vnode更新的时候 会执行 这个updated 可能会触发多次
            updated: function () {

            }
        })

        Vue.directive('color', {
            // 样式 只要通过指令绑定给了元素 不管这个元素 有没有被插入到页面中去 这个元素肯定有了一个内联的样式 将来元素肯定会显示到页面上去 这个时候 浏览器的渲染引擎就是解析 引用给这个样式 换个说法 你是个娃娃 还没生下来 只有在特定时间后
            // 才会出来 不是说永远不实现 只是时间问题
            bind: function (el, binding) {
                // 和样式相关的操作 一般都可以在bind中执行
                el.style.color = binding.value

            }
        })

        var vm = new Vue({
            el: '#app',
            data: {
                id: "",
                name: "",
                keywords: '',
                msg: '看啥呢 看啥呢 看啥呢 看啥呢',
                list: [{
                        id: 1,
                        name: '宝马',
                        ctime: new Date()
                    },
                    {
                        id: 2,
                        name: '保时捷',
                        ctime: new Date()
                    },
                ]
            },
            methods: {
                // 添加的方法
                add() {
                    var car = {
                        id: this.id,
                        name: this.name,
                        ctime: new Date()
                    }

                    this.list.push(car)
                    this.id = this.name = ""
                },
                del(id) {

                    // this.list.some((item,i) => {
                    //     if (item.id == id) {
                    //         // 在数组的some方法中 如果是true 就会马上终止循环
                    //         this.list.splice(i,1)
                    //         return true;
                    //     } 
                    // })

                    var index = this.list.findIndex(item => {
                        if (item.id == id) {
                            return true;
                        }
                    })
                    this.list.splice(index, 1)

                },
                search(keywords) {
                    // 根据关键字 进行数据的搜索
                    // var newList = []
                    // this.list.forEach(item => {
                    //      if(item.name.indexOf(keywords) != -1){
                    //          newList.push(item)
                    //      }
                    // })
                    // return newList


                    var newList = this.list.filter(item => {
                        //  es6中 为字符串提供了一个新方法 叫做 String.prototype.includes('查询的')
                        // 如果有就true 否则false
                        if (item.name.includes(keywords)) {
                            return item
                        }
                    })
                    return newList

                }
            }
        });



        // 定义一个私有的过滤器
        var vm2 = new Vue({
            el: "#app2",
            data: {
                dt: new Date()
            },
            methods: {

            },
            // 这是私有过滤器 过滤器有2个条件 名称和 处理函数
            // 过滤器调用的时候 采用的是就近原则 如果私有和全局名称一致 优先调用 私有 而不是全局
            filters: {
                time: function (dataStr, pattern = '') {
                    // 根据给定的字符串得到特定的时间
                    var dt = new Date(dataStr)
                    var y = dt.getFullYear()
                    var m = (dt.getMonth() + 1).toString().padStart(2, '0')
                    var d = dt.getDate().toString().padStart(2, '0')
                    if (pattern.toLowerCase() === 'yyyy-mm-dd') {
                        return `${y}-${m}-${d}`
                    } else {
                        var hh = dt.getHours().toString().padStart(2, '0')
                        var mm = dt.getMinutes().toString().padStart(2, '0')
                        var ss = dt.getSeconds().toString().padStart(2, '0')

                        return `${y}-${m}-${d} ${hh}:${mm}:${ss}!!!!!`

                    }
                }
            },

            directives: {
                // 设置字体粗细
                // 自定义私有指令
                'fontweight': {
                    bind: function (el, binding) {
                        el.style.fontWeight = binding.value
                    }
                },
                'fontsize': function (el, binding) {
                    // 这个function等同于吧代码写到了bind和updated去
                    el.style.fontSize = parseInt(binding.value) + 'px'
                }
            },


        })
    </script>
</body>

</html>